
<div id="result">
{#    <input type="radio" name="result_radio" id="hide" value="0" checked ><label for="hide">隐藏答案</label>#}
{#    <input type="radio" name="result_radio" id="show" value="1"><label for="show">显示答案</label>#}
{#    <button id="hide" type="button" class="btn btn-info">隐藏答案</button>#}
{#    <button id="show" type="button" class="btn btn-success">显示答案</button>#}

</div>
<div id="all_titles">
    <table id="all_titles_table" class="table table-bordered" border="1px">
        {% for title in lilun_unit_titles %}
        <tr class="title_head" >
            <td class="title" title_type="{{ title.leixing|slice:'2:' }}题"><pre>{{ forloop.counter }}、[{{ title.leixing|slice:'2:' }}题]-{{ title.tigan }}</pre></td>
        </tr>
        <tr class="title_body">
            <!-- 单选 -->
            {% ifequal title.leixing|slice:'2:' '单选' %}
                <td><input name="{{ title.id }}" type="radio" id="{{ title.id }}-*-a"><label for="{{ title.id }}-*-a">&nbsp;&nbsp;A、{{ title.xxa }}</label></td>
                <td><input name="{{ title.id }}" type="radio" id="{{ title.id }}-*-b"><label for="{{ title.id }}-*-b">&nbsp;&nbsp;B、{{ title.xxb }}</label></td>
                <td><input name="{{ title.id }}" type="radio" id="{{ title.id }}-*-c"><label for="{{ title.id }}-*-c">&nbsp;&nbsp;C、{{ title.xxc }}</label></td>
                <td><input name="{{ title.id }}" type="radio" id="{{ title.id }}-*-d"><label for="{{ title.id }}-*-d">&nbsp;&nbsp;D、{{ title.xxd }}</label></td>
            {% endifequal %}

            <!-- 多选 -->
            {% ifequal title.leixing|slice:'2:' '多选' %}
                <td><input name="{{ title.id }}" type="checkbox" id="{{ title.id }}-*-a"><label for="{{ title.id }}-*-a">&nbsp;&nbsp;A、{{ title.xxa }}</label></td>
                <td><input name="{{ title.id }}" type="checkbox" id="{{ title.id }}-*-b"><label for="{{ title.id }}-*-b">&nbsp;&nbsp;B、{{ title.xxb }}</label></td>
                <td><input name="{{ title.id }}" type="checkbox" id="{{ title.id }}-*-c"><label for="{{ title.id }}-*-c">&nbsp;&nbsp;C、{{ title.xxc }}</label></td>
                <td><input name="{{ title.id }}" type="checkbox" id="{{ title.id }}-*-d"><label for="{{ title.id }}-*-d">&nbsp;&nbsp;D、{{ title.xxd }}</label></td>
            {% endifequal %}

            <!-- 判断 -->
            {% ifequal title.leixing|slice:'2:' '判断' %}
                <td><input name="{{ title.id }}" type="radio" id="{{ title.id }}-*-a"><label for="{{ title.id }}-*-a">&nbsp;&nbsp;A、正确</label></td>
                <td><input name="{{ title.id }}" type="radio" id="{{ title.id }}-*-b"><label for="{{ title.id }}-*-b">&nbsp;&nbsp;B、错误</label></td>
            {% endifequal %}

        </tr>
        <tr class="title_answer" >
{#            <td class="title_answer_original"><p><span>答案：</span><b>{{ title.daan }}</b></p></td>#}
            <td class="title_answer_original"><p><button type="button" class="btn btn-default answer">答案：</button><b>{{ title.daan }}</b></p></td>
            <td class="errors_logo"><span class="glyphicon glyphicon-heart" cuoti="false" title_id="{{ title.id }}">&nbsp;</span></td>
        </tr>
        {% endfor %}
    </table>

</div>
<style>
    *{
        margin: 0 auto;
        padding: 0px;
    }
    pre{
        margin: 0px;
        border-radius: 0px;
    }
    #all_titles_table tr,td{
        display: block;
    }
    .title_body td,.title_answer td{
        height: 40px;
    }
    .title_head .title{
        height: auto;
    }
    .table > tbody > tr > td{
         padding: 0px;
    }
    #all_titles_table label{
        width: 95%
    }
    #all_titles_table input,label{
        line-height: 40px;
        display: inline-block;
        vertical-align:top;
    }
    input[type="radio"],input[type='checkbox']{
        height: 40px;
        margin: 0;
        margin-left: 20px;
        margin-right: 10px;
        border-right: 1px dotted rgba(128, 128, 128, 0.5);
    }
    .title_head{
        border-top:1px solid rgb(255, 142, 87);
    }
    .title_head pre{
        font-weight: bold;
    }
    label{
        font-weight: normal;
    }
    .title_answer .title_answer_original b{
        color: red;
        font-weight: normal;
    }
    .title_body td:hover{
        background-color: #f5f5f5;
    }
    .title_answer p{
        line-height: 40px;
        margin-left: 20px;
    }
    .btn{
        border: 0px;
    }
    .title_answer td{
        display: inline-block;
        width: 130px;
        border: 0px solid gray;
    }
    #all_titles_table > tbody > tr > td.errors_logo{
        font-size: 20px;
        color: rgba(128, 133, 127, 0.3);
        height: 40px;
        line-height: 40px;
        margin-left: 10px;
    }
        #timepiece{
            width: 250px;
            height: 200px;
            position: fixed;
            background-color: rgba(222, 216, 203, 0.22);
            right: 20px;
            top: 30px;
        }
        #timepiece_top{
            text-align: center;
            margin-top: 30px;
        }
        #timepiece_center{
            margin: 10px;
            font-size: 45px;
            font-weight: bold;
            text-align: center;
        }
        #timepiece_center span{
            display: inline-block;
            width: 50px;
            height: 50px;
            border: 1px solid black;
        }
        #timepiece_bottom{
            text-align: center;
        }
        .blue{
            color: blue;
        }
        .select_answers{
            width: 50px;
            border:0px solid gray;
        }
        .select_answers span{
            line-height: 40px;
        }
</style>
<script>
    $(function($) {
        // 初始化设置
        function init(){
            $('.title_answer td').css('border', '0px solid rgb(221, 221, 221)')
            $('.answer').next('b').hide()   // 初始化隐藏答案

        }
        init();

        // 答案显示，隐藏的转换
        $('.answer').click(function () {
            {#console.log($(this).next('b'));#}
            if ($(this).next('b').is(':hidden')){
                $(this).next('b').show()
            }else{
                $(this).next('b').hide()
            }
        })

        // 错题本记录红心
        $('#all_titles_table > tbody > tr > td.errors_logo > span').click(function () {
            if ($(this).attr('cuoti') == 'false'){
                $(this).attr('cuoti','true')
                $(this).css('color','red')
            }else{
                $(this).attr('cuoti','false')
                $(this).css('color','rgba(128, 133, 127, 0.3)')
            }
            
        })


    })
</script>
